<template>
  <div v-if="hero">
    <h2>{{hero.name}} details!</h2>
    <div>
        <label>id: </label>{{hero.id}}</div>
    <div>
        <label>name: </label>
        <input v-model="hero.name" placeholder="name" />
    </div>
    <p @click="updateMessage">{{message}}</p>
    <button @click="goBack()">Back</button>
  </div>
</template>
<script>
export default {
  name: "HeroDetail",
  data() {
    return {
      message: "没有更新",
      hero: this.$store.getters.getHeroById(this.$route.params.id)
    };
  },

  methods: {
    goBack: function(heroId) {
      this.$router.go(-1);
    },
    updateMessage: function() {
      this.message = "更新完成";
      console.log(this.$el.textContent); // => '没有更新'
      //   this.$nextTick(function () {
      //     console.log(this.$el.textContent) // => '更新完成'
      //   })
    }
  }
};
</script>
<style scoped>
label {
  display: inline-block;
  width: 3em;
  margin: 0.5em 0;
  color: #607d8b;
  font-weight: bold;
}
input {
  height: 2em;
  font-size: 1em;
  padding-left: 0.4em;
}
button {
  margin-top: 20px;
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
}
button:hover {
  background-color: #cfd8dc;
}
button:disabled {
  background-color: #eee;
  color: #ccc;
  cursor: auto;
}
</style>


